<script setup lang="ts">
import { ref } from 'vue'
import { ReloadOutlined } from '@ant-design/icons-vue';
import { GetReviewAssessment } from '@/api/main'
import ExamineDrawer from '@/components/ExamineDrawer.vue'
import useUserStore from "@/stores/modules/user";
const userStore = useUserStore()
const dataSource = ref([])
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        slots: { customRender: 'index' },
        align:"center"
    },
    {
        title: '考核名称',
        dataIndex: 'name',
        key: 'name',
         align:"center"
    },
    {
        title: '姓名',
        dataIndex: 'empname',
        key: 'empname',
         align:"center"
    },
    {
        title: '创建时间',
        dataIndex: 'reportingMonth',
        key: 'reportingMonth',
         align:"center"
    },
    {
        title: '部门',
        dataIndex: 'orgName',
        key: 'orgName',
         align:"center"
    },
    {
        title: '当前评分',
        dataIndex: 'finalScore',
        key: 'finalScore',
        slots: { customRender: 'finalScore' },
         align:"center"
    },
    {
        title: '考核等级',
        dataIndex: 'assessmentGrade',
        key: 'assessmentGrade',
        slots: { customRender: 'assessmentGrade' },
         align:"center"
    },
    {
        title: '流程状态',
        dataIndex: 'status',
        key: 'status',
        slots: { customRender: 'status' },
         align:"center"
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        slots: { customRender: 'action' },
         align:"center"
    },
]
const pagination = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
// pageSize 变化的回调
const onShowSizeChange = (current, size) => {
    pagination.value.pageNum = current
    pagination.value.pageSize = size
    getData()
}
const  handleChange = (page,pageSize) =>{
    pagination.value.pageNum = page
    pagination.value.pageSize = pageSize
    getData()
}
const getData = () => {
    GetReviewAssessment({
        empId: userStore.empid,
        pageNum: pagination.value.pageNum,
        pageSize: pagination.value.pageSize,
        taskStatus: "wait"
    }).then((response: any) => {
        dataSource.value = response.data
        pagination.value.total = response.total
    })
}
getData()
const drawerOptions = ref({
    title: '考核填报',
    width: '80%',
    visible: false,
})
const examineDrawerRefs = ref()
const showDrawer = (record: any, status: number) => {
    drawerOptions.value = {
        title: record.name,
        width: '1300',
        visible: true,
        record: record,
        assessmentId: record.id
    }
    examineDrawerRefs.value.showDrawer(drawerOptions.value, status)
}
</script>

<template>
    <div style="display: flex;align-items: center;justify-content: flex-end;">
        <ReloadOutlined class="operation-btn" @click="getData" />
    </div>
    <br>
    <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false">
        <template #index="{ index }">
            {{ index + 1 }}
        </template>
        <template #finalScore="{ record }">
            {{ record.assessmentGrade?record.finalScore:' - ' }}
        </template>
        <template #assessmentGrade="{ record }">
            {{ record.assessmentGrade ? record.assessmentGrade : '无' }}
        </template>
        <template #status="{ record }">
            <span>
                <a-tag color="error" v-if="record.status == -1">停用</a-tag>
                <a-tag color="error" v-if="record.status == -2 || record.status == -3">退回</a-tag>
                <a-tag color="#87d068" v-if="record.status == 1">启用</a-tag>
                <a-tag v-if="record.status == 2">部门领导审核</a-tag>
                <a-tag v-if="record.status == 3">分管领导考核</a-tag>
                <a-tag v-if="record.status == 100">处理完毕</a-tag>
            </span>
        </template>
        <template #action="{ record }">
            <span>
                <a-tag color="#2db7f5" style="cursor: pointer;" @click="showDrawer(record,2)">审核</a-tag>
            </span>
        </template>
    </a-table>
    <br>
    <div style="display: flex;justify-content: flex-end;">
        <a-pagination show-size-changer v-model:current="pagination.pageNum" v-model:pageSize="pagination.pageSize"
            :total="pagination.total" @showSizeChange="onShowSizeChange" @change="handleChange"/>
    </div>
    <ExamineDrawer ref="examineDrawerRefs" @getData="getData" />
</template>

<style scoped>
.operation-btn {
    border: 1px solid #F2F3F5;
    width: 35px;
    height: 35px;
    display: block;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 10px;
    font-weight: 700;
}

.operation-btn:hover {
    background: #f2f3f5;
    color: #1677ff;
}
</style>
